import React, { Component } from 'react'

class Zhangsan extends Component {
    state = {
        userName: ''
    }
    changeUserName = (e) => {
        this.setState({
            userName: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={ this.state.userName } onChange= { this.changeUserName } />
                我是张三 { this.state.userName }
            </div>
        )
    }
}

class LiSi extends Component {
    state= {
        userName: ''
    }
    changeUserName = (e) => {
        this.setState({
            userName: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={ this.state.userName } onChange= { this.changeUserName } />
                我是李四 { this.state.userName }
            </div>
        )
    }
}

export default class App extends Component {
    render() {
        return (
            <div>
                <Zhangsan></Zhangsan>
                <LiSi></LiSi>
            </div>
        )
    }
}